/**
 * @author mrdoob / http://mrdoob.com/
 */
var fps = 0
var Stats = function (callback) {
  var mode = 0
  var container = document.createElement('div')
  container.style.cssText =
    'position:absolute;top:0;left:0;opacity:1;z-index:10;mix-blend-mode: lighten; cursor: pointer;'
  container.addEventListener(
    'click',
    function (event) {
      event.preventDefault()
      showPanel(++mode % container.children.length)
      callback(mode)
      // store.commit('changeMonitoringPanelId', mode)
    },
    false
  )

  function addPanel(panel) {
    container.appendChild(panel.dom)
    return panel
  }

  function showPanel(id) {
    for (var i = 0; i < container.children.length; i++) {
      container.children[i].style.display = i === id ? 'block' : 'none'
    }
    mode = id
  }
  //
  var beginTime = (performance || Date).now(),
    prevTime = beginTime,
    frames = 0,
    fps = 0
  var fpsPanel = addPanel(new Stats.Panel('FPS', '#44cbd7', '#000'))
  var msPanel = addPanel(new Stats.Panel('MS', '#40d080', '#000'))
  if (self.performance && self.performance.memory) {
    var memPanel = addPanel(new Stats.Panel('MB', '#43a6d4', '#000'))
  }
  showPanel(0)
  return {
    REVISION: 16,
    dom: container,
    addPanel: addPanel,
    showPanel: showPanel,
    begin: function () {
      beginTime = (performance || Date).now()
    },
    end: function () {
      frames++
      var time = (performance || Date).now()
      msPanel.update(time - beginTime, 200)
      if (time >= prevTime + 1000) {
        let fpsRang = fpsPanel.update((frames * 1000) / (time - prevTime), 100, 'fps')
        this.fps = Math.round((frames * 1000) / (time - prevTime))
        if (typeof this.info === 'function') {
          let ms = Math.floor(time - beginTime),
            mb = performance.memory ? Math.round(performance.memory.usedJSHeapSize / 1048576) : 0,
            totalMb = performance.memory ? Math.round(performance.memory.jsHeapSizeLimit / 1048576) : 0
          this.info(this.fps, fpsRang.min, fpsRang.max, ms, mb, totalMb)
        }
        prevTime = time
        frames = 0
        if (memPanel) {
          var memory = performance.memory ? performance.memory : 0
          memPanel.update(
            memory.usedJSHeapSize / 1048576,
            memory.jsHeapSizeLimit / 1048576
          )
        }
      }

      return time
    },

    update: function () {
      beginTime = this.end()
    },
    // Backwards Compatibility
    domElement: container,
    setMode: showPanel,
    getPanelId: function () {
      return mode
    },
    getFps: function () {
      return fps
    }
  }
}
Stats.Panel = function (name, fg, bg) {
  var min = Infinity,
    max = 0,
    round = Math.round
  var PR = round(window.devicePixelRatio || 1)
  var WIDTH = 260 * PR,
    HEIGHT = 80 * PR,
    TEXT_X = 250 * PR,
    TEXT_Y = 20 * PR,
    GRAPH_X = 0 * PR,
    GRAPH_Y = 40 * PR,
    GRAPH_WIDTH = 260 * PR,
    GRAPH_HEIGHT = 40 * PR

  var canvas = document.createElement('canvas')
  canvas.width = WIDTH
  canvas.height = HEIGHT
  canvas.style.cssText = 'width:260px;height:80px'

  var context = canvas.getContext('2d')
  context.font = 'bold ' + 16 * PR + 'px DS-DIGI, Helvetica,Arial,sans-serif'
  context.textBaseline = 'middle'
  context.textAlign = 'right'
  context.fillStyle = bg
  context.fillRect(0, 0, WIDTH, HEIGHT)

  context.fillStyle = fg
  context.fillText(name, TEXT_X, TEXT_Y)
  context.fillRect(GRAPH_X, GRAPH_Y, GRAPH_WIDTH, GRAPH_HEIGHT)

  context.fillStyle = bg
  context.globalAlpha = 0.9
  context.fillRect(GRAPH_X, GRAPH_Y, GRAPH_WIDTH, GRAPH_HEIGHT)

  return {
    dom: canvas,
    update: function (value, maxValue, type) {
      min = Math.min(min, value)
      max = Math.max(max, value)
      context.fillStyle = bg
      context.globalAlpha = 1
      context.fillRect(0, 0, WIDTH, GRAPH_Y)
      context.fillStyle = fg
      type == 'fps' && (fps = round(min))
      context.fillText(
        round(value) + ' ' + name + ' (' + round(min) + '-' + round(max) + ')',
        TEXT_X,
        TEXT_Y
      )
      context.drawImage(
        canvas,
        GRAPH_X + PR,
        GRAPH_Y,
        GRAPH_WIDTH - PR,
        GRAPH_HEIGHT,
        GRAPH_X,
        GRAPH_Y,
        GRAPH_WIDTH - PR,
        GRAPH_HEIGHT
      )

      context.fillRect(GRAPH_X + GRAPH_WIDTH - PR, GRAPH_Y, PR, GRAPH_HEIGHT)
      context.fillStyle = bg
      context.globalAlpha = 0.9
      context.fillRect(
        GRAPH_X + GRAPH_WIDTH - PR,
        GRAPH_Y,
        PR,
        round((1 - value / maxValue) * GRAPH_HEIGHT)
      )
      return { min: round(min), max: round(max) }
    }
  }
}
export default Stats
